<template>
  <div class="flex_between_aligncenter">
    <ga-breadcrumb class="container-breadcrumb">
      <template #separator>
        <icon-right />
      </template>
      <ga-breadcrumb-item v-for="(item, index) in items" :key="index">
        <router-link
          v-if="item.path"
          :to="getPath(item.path)"
          :replace="true"
          class="router_link"
        >
          {{ getLabel(item) }}
        </router-link>
        <span v-else> {{ getLabel(item) }}</span>
      </ga-breadcrumb-item>
    </ga-breadcrumb>
  </div>
</template>

<script setup>
import { historyPath, historyFullPath } from "@/utils/path-util";
import { useRoute } from "vue-router";

const route = useRoute();
defineProps({
  items: {
    type: Array,
    default: () => [],
  },
});
const getPath = (path) => {
  if (historyPath() === path) {
    return historyFullPath();
  }
  return route.path === path ? "" : path;
};
const getLabel = (item) => {
  const { label } = item;
  if (label) {
    return label;
  }
  return item;
};
</script>

<style scoped lang="scss">
.container-breadcrumb {
  width: 100%;
  .router_link {
    color: #0f5ef7;
  }
}
.flex_between_aligncenter {
  padding: 0 16px;
  .container-breadcrumb {
    padding: 14px 0;
    :deep(.garco-breadcrumb-item) {
      color: #2c406899;
      &:last-child {
        color: #000000e5;
      }
      .router-link:hover {
        background-color: initial;
      }
    }
  }
}
</style>
